<template>
    <div id="comb_view">
        <div id="game_231" class="game_view">
            <div>
                <div>
                    <table class="u-table2">
                        <thead id="lma_radios">
                        <tr>
                            <th colspan="2" class="radio_td" >
                                <input type="radio" checked="checked" name="lma"
                                       data-min="3" data-group="3" data-max="7"
                                       data-name="三中二" data-id="24417" data-odds="20">
                            </th>
                            <th class="radio_td"><input type="radio" name="lma" data-min="3" data-group="3"
                                                        data-max="10" data-name="三全中" data-id="24419" data-odds="670">
                            </th>
                            <th class="radio_td"><input type="radio" name="lma" data-min="2" data-group="2" data-max="7"
                                                        data-name="二全中" data-id="24420" data-odds="60"></th>
                            <th colspan="2" class="radio_td">
                                <input type="radio" name="lma" data-min="2" data-group="2"
                                       data-max="7" data-name="二中特" data-id="24424"
                                       data-odds="25.5">
                            </th>
                            <th class="radio_td"><input type="radio" name="lma" data-min="2" data-group="2" data-max="7"
                                                        data-name="特串" data-id="24422" data-odds="150"></th>
                            <th class="radio_td"><input type="radio" name="lma" data-min="4" data-group="4" data-max="4"
                                                        data-name="四全中" data-id="24423" data-odds="950"></th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td colspan="2" class="name not-event">三中二</td>
                            <td class="name not-event">三全中</td>
                            <td class="name not-event">二全中</td>
                            <td colspan="2" class="name not-event">二中特</td>
                            <td class="name not-event">特串</td>
                            <td class="name not-event">四全中</td>
                        </tr>
                        <tr>
                            <td class="odds not-event"><span class="c-txt3">20</span></td>
                            <td class="odds not-event"><span class="c-txt3">100</span></td>
                            <td class="odds not-event"><span class="c-txt3">670</span></td>
                            <td class="odds not-event"><span class="c-txt3">60</span></td>
                            <td class="odds not-event"><span class="c-txt3">25.5</span></td>
                            <td class="odds not-event"><span class="c-txt3">50</span></td>
                            <td class="odds not-event"><span class="c-txt3">150</span></td>
                            <td class="odds not-event"><span class="c-txt3">950</span></td>
                        </tr>
                        </tbody>
                    </table>
                    <table class="u-table2 mt10">
                        <thead>
                        <tr>
                            <th>号</th>
                            <th>勾选</th>
                            <th>号</th>
                            <th>勾选</th>
                            <th>号</th>
                            <th>勾选</th>
                            <th>号</th>
                            <th>勾选</th>
                            <th>号</th>
                            <th>勾选</th>
                        </tr>
                        </thead>
                        <tbody id="lma_checkbox">
                        <TrItem :key="i" v-for="(row,i) in list[0]" :row="row" :bet-number="betNumber" :show-name="false" :show-amount="false" :show-checkbox="true" :show-bet="false"></TrItem>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import TrItem from "../components/TrItem";
    import {mapState} from "vuex";

    export default {
        name: "LianMa",
        components:{
            TrItem
        },
        data(){
            return{
                radioIndex:0,
                list:[
                    [
                        [
                            {id:23842,number:'01',bet:48.6,selected:false,hovering:false,amount:''},
                            {id:23843,number:'11',bet:48.6,selected:false,hovering:false,amount:''},
                            {id:23844,number:'21',bet:48.6,selected:false,hovering:false,amount:''},
                            {id:23845,number:'31',bet:48.6,selected:false,hovering:false,amount:''},
                            {id:23846,number:'41',bet:48.6,selected:false,hovering:false,amount:''}
                        ],
                        [
                            {id:23847,number:'02',bet:48.6,selected:false,hovering:false,amount:''},
                            {id:23848,number:'12',bet:48.6,selected:false,hovering:false,amount:''},
                            {id:23849,number:'22',bet:48.6,selected:false,hovering:false,amount:''},
                            {id:23850,number:'32',bet:48.6,selected:false,hovering:false,amount:''},
                            {id:23851,number:'42',bet:48.6,selected:false,hovering:false,amount:''}
                        ],
                        [
                            {id:23852,number:'03',bet:48.6,selected:false,hovering:false,amount:''},
                            {id:23853,number:'13',bet:48.6,selected:false,hovering:false,amount:''},
                            {id:23854,number:'23',bet:48.6,selected:false,hovering:false,amount:''},
                            {id:23855,number:'33',bet:48.6,selected:false,hovering:false,amount:''},
                            {id:23856,number:'43',bet:48.6,selected:false,hovering:false,amount:''}
                        ],
                        [
                            {id:23857,number:'04',bet:48.6,selected:false,hovering:false,amount:''},
                            {id:23858,number:'14',bet:48.6,selected:false,hovering:false,amount:''},
                            {id:23859,number:'24',bet:48.6,selected:false,hovering:false,amount:''},
                            {id:23860,number:'34',bet:48.6,selected:false,hovering:false,amount:''},
                            {id:23861,number:'44',bet:48.6,selected:false,hovering:false,amount:''}
                        ],
                        [
                            {id:23862,number:'05',bet:48.6,selected:false,hovering:false,amount:''},
                            {id:23863,number:'15',bet:48.6,selected:false,hovering:false,amount:''},
                            {id:23864,number:'25',bet:48.6,selected:false,hovering:false,amount:''},
                            {id:23865,number:'35',bet:48.6,selected:false,hovering:false,amount:''},
                            {id:23866,number:'45',bet:48.6,selected:false,hovering:false,amount:''}
                        ],
                        [
                            {id:23867,number:'06',bet:48.6,selected:false,hovering:false,amount:''},
                            {id:23868,number:'16',bet:48.6,selected:false,hovering:false,amount:''},
                            {id:23869,number:'26',bet:48.6,selected:false,hovering:false,amount:''},
                            {id:23870,number:'36',bet:48.6,selected:false,hovering:false,amount:''},
                            {id:23871,number:'46',bet:48.6,selected:false,hovering:false,amount:''}
                        ],
                        [
                            {id:23872,number:'07',bet:48.6,selected:false,hovering:false,amount:''},
                            {id:23873,number:'17',bet:48.6,selected:false,hovering:false,amount:''},
                            {id:23874,number:'27',bet:48.6,selected:false,hovering:false,amount:''},
                            {id:23875,number:'37',bet:48.6,selected:false,hovering:false,amount:''},
                            {id:23876,number:'47',bet:48.6,selected:false,hovering:false,amount:''}
                        ],
                        [
                            {id:23877,number:'08',bet:48.6,selected:false,hovering:false,amount:''},
                            {id:23878,number:'18',bet:48.6,selected:false,hovering:false,amount:''},
                            {id:23879,number:'28',bet:48.6,selected:false,hovering:false,amount:''},
                            {id:23880,number:'38',bet:48.6,selected:false,hovering:false,amount:''},
                            {id:23881,number:'48',bet:48.6,selected:false,hovering:false,amount:''}
                        ],
                        [
                            {id:23882,number:'09',bet:48.6,selected:false,hovering:false,amount:''},
                            {id:23883,number:'19',bet:48.6,selected:false,hovering:false,amount:''},
                            {id:23884,number:'29',bet:48.6,selected:false,hovering:false,amount:''},
                            {id:23885,number:'39',bet:48.6,selected:false,hovering:false,amount:''},
                            {id:23886,number:'49',bet:48.6,selected:false,hovering:false,amount:''}
                        ],
                        [
                            {id:23887,number:'10',bet:48.6,selected:false,hovering:false,amount:''},
                            {id:23888,number:'20',bet:48.6,selected:false,hovering:false,amount:''},
                            {id:23889,number:'30',bet:48.6,selected:false,hovering:false,amount:''},
                            {id:23890,number:'40',bet:48.6,selected:false,hovering:false,amount:''}
                        ]
                    ],
                ]
            }
        },
        computed:{
            ...mapState(['betNumber'])
        },
        watch:{
            betNumber(nVal){
                this.list.forEach((arr)=>{
                    arr.forEach((item)=>{
                        item.forEach((o)=>{
                            if (o.selected) {
                                o.amount = nVal
                            }
                        })
                    })
                })
                this.$forceUpdate()
            }
        },
    }
</script>

<style scoped>

</style>